<template>
  <el-table class="table" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column prop="id" label="num" width="180" />
    <el-table-column prop="name" label="name" width="180" />
    <el-table-column prop="number" label="concat" />
  </el-table>
  <div class="btn">
    <el-button type="primary" @click="show = !show">点击新增</el-button>
    <div>
      <el-input v-model="id"></el-input>
      <el-button type="success" @click="delete_()">删除</el-button>
    </div>
  </div>

  <el-form v-if="show" :label-position="labelPosition" label-width="100px" :model="user" style="max-width: 460px">
    <el-form-item label="Name">
      <el-input v-model="user.name" />
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="user.number" />
    </el-form-item>
    <div>
      <el-button @click="add()" type="success">submit</el-button>
      <el-button @click="delete_()" type="danger">cancle</el-button>
    </div>

  </el-form>
</template>


<script setup>
import { reactive, ref } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import axios from 'axios'
let tableData = reactive([])
let show = ref(false)
const id = ref()
const labelPosition = ref('left')

const user = reactive({
  name: '',
  number: '',
})
const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
// 初次渲染
axios.get('http://localhost:3000/get_user').then(response => {
    tableData.push(...response.data.data)
  }).catch(error => {
    console.log(error)
  })

const getter_ = () => {
  axios.get('http://localhost:3000/get_user').then(response => {
    console.log(response.data.data[response.data.data.length-1])
    tableData.push(response.data.data[response.data.data.length-1])
  }).catch(error => {
    console.log(error)
  })
};



  function add() {
    axios.post('http://localhost:3000/add_user', user).then(response => {
      getter_()
    }).catch(error => {
      console.log(error)
    });
    for (let item in user) {
      user[item] = ''
    }
  }
function delete_() {
    axios.post('http://localhost:3000/delete_user', { 'id': parseInt(id.value) }).then(response => {
     location.reload(true)
    }).catch(error => {
      console.log(error)
    });
    for (let item in user) {
      user[item] = ''
    }
  }






</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-table__inner-wrapper {
  margin: 0 auto;
}

#app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.el-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60%;
}

.el-form-item {
  width: 60%;
}

.btn {
  display: flex;
  justify-content: space-between;
  margin: 15px auto;
}

.btn div {
  display: flex;
}
</style>